html, body {
	height: 100%;
	margin: 0;
}

div.container {
	height: 100%;
}

div.header {
	padding: 0;
	background-color: #cccccc;
	text-shadow: 2px 2px #aaaaaa;
}
div.header h1 {
	margin-bottom: 0.2rem;
}
div.header div:first-child {
	padding: 10px 20px;
	border-right: 10px solid #bbbbbb;
}
div.header div:not(:first-child) {
	margin-left: 20px;
}

div.content {
	background-color: #ffd5bc;
	padding: 10px 20px;
	overflow: auto;
}

/* ---------- Flexbox helper classes/rules ---------- */
/* --- Use on flexbox container --- */
.Hbox {
	display: flex;
	flex: none;
	flex-direction: row;
	flex-wrap: nowrap;
	align-content: center;
	align-items: center;

	/* Our hbox's are always left-to-right */
	writing-mode: horizontal-tb;
	direction: ltr;
}
.Vbox {
	display: flex;
	flex: none;
	flex-direction: column;
	flex-wrap: nowrap;
	align-content: center;
	align-items: center;

	/* Our vbox's are always top-to-bottom */
	writing-mode: horizontal-tb;
	direction: ltr;
}

/* These classes control the positioning of items along the main axis (eg. left-right for an Hbox) */
.StartAlign {
	justify-content: flex-start;
}
.MidAlign {
	justify-content: center;
}
.EndAlign {
	justify-content: flex-end;
}

/* These classes control the positioning of items along the counter-axis (eg. top-bottom for an Hbox) */
.StartDistribute {
	align-items: flex-start;
}
.MidDistribute {
	align-items: center;
}
.EndDistribute {
	align-items: flex-end;
}
.StretchDistribute {
	align-items: stretch;
}

/* --- Use on flexbox items (only needed if flex expansion is required) --- */
.FlexExpand {
	flex: 1 1 auto;
}
.FlexExpandDouble {
	flex: 2 1 auto;
}

/* ---------- General helper classes ---------- */
.NoWrap        { white-space: nowrap; }
.YesWrap       { text-wrap: normal; word-wrap: break-word; }
.Clearer       { clear: both; height: 0; }
.ClearerLeft   { clear: left; height: 0; }
.ClearerRight  { clear: right; height: 0; }
.Mid           { vertical-align: middle; }
.Collapsed     { display: none; }
.Hidden        { visibility: hidden; }